<template>
  <div class="tabl">
    <GiTable
      row-key="id"
      id="userWithdrawal"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      @refresh="getTableData"
      :simple="true"
    >
      <template #withdrawalNo="{ record }">
        <MsCopyDiv :text="record.applyNo" title="提现订单号" :showLeftTitle="true" />
        <MsCopyDiv
          :text="record.payNo"
          title="支付宝交易号"
          :showLeftTitle="true"
          v-if="record.withdrawalInfo.type != 2"
        />
      </template>
      <template #withdrawalInfo="{ record }">
        <p>
          {{ record.withdrawalInfo.bankName }}：
          {{ record.withdrawalInfo.realName }}
          <MsCopyDiv :text="record.withdrawalInfo.accountName" />
        </p>
      </template>
      <template #paymentAccountInfo="{ record }">
        <p v-if="record?.paymentAccountInfo">
          {{ record.paymentAccountInfo?.accountType == 1 ? '支付宝' : '银行卡' }}
          - {{ record.paymentAccountInfo?.account || '--' }}
        </p>
        <p v-else>--</p>
      </template>
      <template #statusName="{ record }">
        <div class="flex-center" :class="' color_' + record.status">
          <span class="span_color color_"></span>
          <span class="ml-6">{{
            record.status == 1 ? '未审核' : record.status == 10 ? '打款成功' : record.status == -10 ? '打款失败' : '--'
          }}</span>
        </div>
      </template>
    </GiTable>
  </div>
</template>
<script setup>
import { usePagination } from '@/hooks'
import { withdrawalApplySearch } from '@/apis'
import { deleteEmpty, reAssign } from '@/utils/common'
import MsCopyDiv from '@/components/MsCopyDiv/index.vue'

defineOptions({ name: 'fdProcess' })
const route = useRoute()
const columns = ref([
  {
    title: '提现金额',
    width: 140,
    dataIndex: 'amount',
    render: (data) => {
      const text = data.record.amount
      return '￥' + text
    }
  },
  {
    title: '到账金额',
    width: 140,
    dataIndex: 'actualAmount',
    render: (data) => {
      const text = data.record.actualAmount
      return '￥' + text
    }
  },
  {
    title: '提现时间',
    width: 180,
    dataIndex: 'applyAt'
  },
  {
    title: '到账时间',
    width: 180,
    dataIndex: 'processAt',
    render: (data) => {
      const text = data.record.processAt
      return text || '--'
    }
  },
  {
    title: '提现凭证',
    width: 320,
    slotName: 'withdrawalNo'
  },
  {
    title: '提现账号',
    width: 200,
    slotName: 'withdrawalInfo'
  },
  {
    title: '打款账户',
    width: 150,
    slotName: 'paymentAccountInfo',
    align: 'center'
  },

  {
    title: '状态',
    width: 120,
    slotName: 'statusName',
    align: 'center'
  },
  {
    title: '备注',
    width: 150,
    dataIndex: 'processRemark',
    ellipsis: true,
    tooltip: true
  }
])

const loading = ref(false)
const tableData = ref([])
const selectedKeys = ref([])
const statusList = [
  {
    id: -10,
    text: '打款失败'
  },
  {
    id: 10,
    text: '打款成功'
  },
  {
    id: 1,
    text: '未审核'
  }
] // 打款状态

const listParams = reactive({
  page: 1,
  size: 10,
  applyAtStart: undefined, // 提现开始时间
  applyAtEnd: undefined, // 提现结束时间
  processAtStart: undefined, // 到账开始时间
  processAtEnd: undefined, // 到账结束时间
  status: undefined, // 状态 //是否打款成功 0未审核 1打款成功 -2 打款失败
  userKeyword: route.query.iId || route.query.inviteCode // 邀请码/手机号
})
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.size })

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.size = pagination.pageSize
    const res = await withdrawalApplySearch(deleteEmpty(listParams))
    tableData.value = res.data.data
    setTotal(res?.data?.total || 0)
  } finally {
    loading.value = false
  }
}
getTableData()

const topRefresh = () => {
  getTableData()
}

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 列表重置搜索
const onResetSearch = () => {
  reAssign(listParams, false)
  listParams.userKeyword = route.query.iId
  listParams.pageSize = 10
  init()
  changeCurrent(1)
}
</script>
<style lang="scss" scoped>
.tabl {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  :deep(.arco-row) {
    width: 100%;
  }
  .form {
    background: var(--color-bg-1);
    padding: $margin;
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
  .row_wrap {
    display: flex;
    align-items: center;
    background: var(--color-bg-1);
    padding: $margin;
    margin-bottom: $margin;
    text-align: center;
    .arco-col {
      position: relative;
      &:not(:last-child):after {
        position: absolute;
        content: '';
        right: 0;
        top: 50%;
        transform: translate(0%, -50%);
        width: 1px;
        height: 30px;
        background: #eee;
      }
    }
    span {
      display: inline-block;
      margin: 10px 0;
      color: rgba(32, 32, 32, 1);
    }
  }
  .gi-table {
    background: var(--color-bg-1);
    padding: $margin;
  }
  .color_ {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }
  .color_-10 {
    color: red;
    .color_ {
      background: red;
    }
  }
  .color_10 {
    color: rgba(59, 201, 105, 1);
    .color_ {
      background: rgba(59, 201, 105, 1);
    }
  }
  .color_1 {
    color: rgba(245, 121, 23, 1);
    .color_ {
      background: rgba(245, 121, 23, 1);
    }
  }
}
</style>
